<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6"
        ><el-input
          clearable
          v-model="query.searchValue"
          placeholder="请输入任务标题"
        ></el-input
      ></el-col>
      <el-col :span="6">
        <el-date-picker
          style="width: 100%"
          @change="timeChage"
          :picker-options="pickerOptions"
          v-model="query.time"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="4"
        ><el-select v-model="query.releaseState">
          <el-option
            v-for="item in [
              {
                label: '全部',
                value: '-1',
              },{
                label: '未发布',
                value: '0',
              },
              {
                label: '已发布',
                value: '1',
              },
              
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>

      <el-col :span="2">
        <el-button type="primary" @click="findListByCondition">查询</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="findListBy">新增</el-button>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="noticeTitle" label="任务标题" width="180">
      </el-table-column>
      <el-table-column
        prop="unitNoticeMessageFormatStr"
        label="完成任务单位业态"
        width="280"
      >
      </el-table-column>
      <el-table-column prop="noticeSource" label="消息来源">
      </el-table-column>
      <el-table-column prop="releaseStatus" label="状态">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.releaseState == 0" effect="dark"
            >未发布</el-tag
          >
          <el-tag
            type="success"
            v-if="scope.row.releaseState == 1"
            effect="dark"
            >已发布</el-tag
          >
          <el-tag
            type="danger"
            v-if="scope.row.releaseState == 2"
            effect="dark"
            >作废</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="releaseDateStr" label="发布时间">
                 <template slot-scope="scope">
                   {{scope.row.releaseState==0?'--':scope.row.releaseDateStr}}
                 </template>
      </el-table-column>
      <el-table-column prop="releaseTimeStr" label="完成单位数">
      </el-table-column>
      <el-table-column prop="createTimeStr" label="创建日期"> </el-table-column>
      <el-table-column prop="createTimeStr" label="操作" width="240">
        <template slot-scope="scope">
          <el-button size="mini" @click="view(scope.row)">查看</el-button>
          <el-button size="mini" type="primary"  @click="editor(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="totalCount"></pagination>
  </div>
</template>
<script>
export default {
  // props:[],
  // 页面加载
  created() {
    this.findListByCondition();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      totalCount: 0,
      tableData: [],
      query: {
        createUnitId: "12515115144224",
        createUnitName: "苏州亿通",
        endDate: "",
        isPage: 0,
        page: 1,
        pageSize: 10,
        releaseState: "-1",
        searchValue: "",
        startDate: "",
        time: [],
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  // 方法
  methods: {
    findListByCondition() {
      this.$http
        .findListByConditionMessage(this.query)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
            this.totalCount = res.totalCount;
          } else {
            this.$error(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$error();
        });
    },
    timeChage(e) {
      if(e){
              this.query.startDate = e[0];
      this.query.endDate = e[1];
      }else{
                 this.query.startDate = "";
      this.query.endDate = "";
      }

    },
    findListBy() {
      sessionStorage.removeItem("message")
      this.$router.push("/addMessage");
    },
    deleteById(id) {
      this.$confirm("确认删除这条任务吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http
          .deleteByIdMessage({
            params: {
              id,
            },
          })
          .then((res) => {
            if (res.code == 200) {
              this.$success(res.msg);
              this.findListByCondition();
            } else {
              this.$error(res.msg);
            }
          });
      });
    },
    view(e) {
      sessionStorage.setItem("message",JSON.stringify(e));
      this.$router.push("/viewMessage");
    },
    editor(e){
          sessionStorage.setItem("message",JSON.stringify(e));
          this.$router.push("/addMessage");
    },
 
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}
</style>